<script setup lang="ts">
import { computed, ref } from 'vue';
import TaskTabs from '@/views/ChatView/components/TaskTabs.vue';
import KeywordList from '@/views/ChatView/components/KeywordList.vue';
import { v4 as uuidv4 } from 'uuid';
import { mockMessageList, type Message, user, robot, rotbotReply } from './config/index';
import { KEY_WORDSLIST } from './config/constant';

// 设置页面标题
document.title = '聊天';
// 定义容器ref
const containerRef = ref<HTMLDivElement | null>(null);
// 定义输入框ref
const inputRef = ref<HTMLInputElement>();
// 定义输入框的值
const inputValue = ref('');
// 定义消息列表
const messgeList = ref<Array<Message>>(mockMessageList);

// 初始化滚动条位置
const init = () => {
  const dom = containerRef.value as HTMLDivElement;
  if (dom) {
    setTimeout(() => {
      dom.scrollTo(0, dom.scrollHeight + 100);
    }, 0);
  }
};

// 用户发言
const userSpeak = (item: string) => {
  const userMsg: Message = {
    id: uuidv4(),
    type: 'user',
    msg: {
      text: item
    }
  };
  messgeList.value.push(userMsg);
  robotSpeak(item);
};

// 机器人发言
const robotSpeak = (item: string) => {
  const mesInfo = rotbotReply(item);
  messgeList.value.push(mesInfo);
  init();
};

// 点击关键词
const clickItem = (item: string) => {
  inputValue.value = '';
  userSpeak(item);
};

// 发送消息
const sendMsg = () => {
  userSpeak(inputValue.value);
  inputValue.value = '';
  inputRef.value?.blur();
};

// 按下回车键
const onPressEnter = () => {
  sendMsg();
};

// 计算关键词列表
const kewwordList = computed(() => {
  return KEY_WORDSLIST.filter((item) => item.includes(inputValue.value) && inputValue.value.trim());
});
// 返回上一级
const onClickLeft = () => {
  window.history.go(-1);
};
</script>

<template>
  <div class="chat-view__input">
    <van-nav-bar title="在线咨询" left-text="" left-arrow @click-left="onClickLeft" class="chat-view__input__nav" />
    <div class="chat-view">
    <div class="chat-view__container" ref="containerRef">
      <template v-for="item in messgeList" :key="item.id">
        <!-- robot -->
        <div class="chat-view-robot" v-if="item.type === 'robot'">
          <div class="chat-view-robot__avatar">
            <img class="img" src="https://img0.baidu.com/it/u=1064943157,2182463586&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731776400&t=349e064114999263c7d60fdb8847932a" />
          </div>
          <div class="chat-view-robot__content">
            <div class="chat-view-robot__name"></div>
            <!-- 机器消息 -->
            <div class="chat-view-robot__msgBox">
              <div class="chat-view-robot__message" v-if="item.msg.text || item.msg.imgUrl">
                <span class="text">{{ item.msg.text }}</span>
                <img class="img" :src="item.msg.imgUrl" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 用户 -->
        <div class="chat-view-user" v-if="item.type === 'user'">
          <div class="chat-view-user__content">
            <div class="chat-view-user__name">{{ user.name }}</div>
            <div class="chat-view-user__msgBox">
              <div class="chat-view-user__message">
                <span>{{ item.msg.text }}</span>
              </div>
            </div>
          </div>
          <div class="chat-view-user__avatar">
            <img class="img" src="https://ww2.sinaimg.cn/mw690/0073ozWdly1hokzl10r1sj30u00u0ad7.jpg" alt="" />
          </div>
        </div>
      </template>
    </div>
    <div class="chat-view-footer">
      <TaskTabs @clickTabs="userSpeak" />
      <div class="chat-view-footer__keyword" v-if="kewwordList.length > 0">
        <KeywordList :list="kewwordList" @clickItem="clickItem" :keyword="inputValue" />
      </div>
      <div class="chat-view-footer__inputBox">
        <input class="input" @keydown.enter="onPressEnter" placeholder="请输入你的问题" ref="inputRef" v-model="inputValue" enterkeyhint="send" />
        <t-button class="button" :disabled="inputValue.trim().length <= 0" @click="sendMsg">发送</t-button>
      </div>
    </div>
  </div>
  </div>

  
</template>

<style lang="less">
@import './index.less';
</style>
